<template>
  <div>

    <Head></Head>
    <div class="tab_box">
      <div class="tabLeft">
        <ul class="clear lf">
          <li class="lf"><a href="#" class="tabA">首页</a> </li>
          <li class="lf"><a href="#" class="tabA">资讯</a> </li>
          <li class="lf"><a href="#" class="tabA">作品</a> </li>
          <li class="lf"><a href="#" class="tabA">字体</a> </li>
          <li class="lf"><a href="#" class="tabA">文章</a> </li>
          <li class="lf"><a href="#" class="tabA">赛事</a> </li>
          <li class="lf"><a href="#" class="tabA">人才网</a> </li>
          <li class="lf"><a href="#" class="tabA">意品汇</a> </li>
          <li class="lf"><a href="#" class="tabA">设计交易</a> </li>
          <li class="lf"><a href="#" class="tabA">网站导航</a> </li>
        </ul>
        <div>
          <div>
            <div>
              <ul></ul>
            </div>
            <div>
              <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
              </ul>
            </div>
            <div>
              <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
              </ul>
            </div>
            <div>
              <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
              </ul>
            </div>
            <div>
              <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
              </ul>
            </div>
            <div>
              <ul>

              </ul>
            </div>
            <div>
              <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
              </ul>
            </div>
            <div>
              <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
              </ul>
            </div>
            <div>
              <ul>
              </ul>
            </div>
            <div>
              <ul>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="tabRight">
        <el-row>
          <el-col :span="7">
            <el-dropdown size="large">
              <span class="el-dropdown-link" style="font-size:20px；color:#6f6f71; line-height:55px">
                作品<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item >黄金糕</el-dropdown-item>
                <el-dropdown-item >狮子头</el-dropdown-item>
                <el-dropdown-item >螺蛳粉</el-dropdown-item>
                <el-dropdown-item >双皮奶</el-dropdown-item>
                <el-dropdown-item >蚵仔煎</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
          <el-col :span="15">
           <el-input v-model="tabSearch" placeholder="请输入关键词" class="paperview-input-text"></el-input>
          </el-col>
          <el-col :span="2">
            <i class="el-icon-search" style="font-size:24px; line-height:55px;color:rgb(230,20,40)"></i>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="headerNav">
      <div class="searchBox">
        <el-input placeholder="精品素材 每日更新" v-model="input" class="input-with-select" @focus="inputClick" @blur="inputClick" @keyup.enter.native="search" style="width:680px ;">
          <!-- <el-button slot="append" icon="el-icon-search" class="btn"></el-button> -->
        </el-input>
        <button class="btn" @click="search">
          <i class="el-icon-search" style="font-size:25px"></i>
        </button>
        <el-card v-show="displayCar" class="inputCar">
          <div class="searchHistory">
            <span>搜索历史:</span>
            <a href="#">儿童节海报</a>
            <a href="#">粽子包装</a>
            <a href="#">护士节海报</a>
            <a href="#">夏天</a>
            <a href="#">520</a>
          </div>
          <div style="padding-top: 25px;padding-left:30px">
            <ul class="recommend">
              <li>
                <a href="#"><span>样机</span></a>
              </li>
              <li>
                <a href="#"><span>拍照框</span></a>
              </li>
              <li>
                <a href="#"><span>装饰画</span></a>
              </li>
              <li>
                <a href="#"><span>618首页</span></a>
              </li>
              <li>
                <a href="#"><span>粽子包装</span></a>
              </li>
              <li>
                <a href="#"><span>夏季美陈</span></a>
              </li>
              <li>
                <a href="#"><span>毕业答辩PPT</span></a>
              </li>
              <li>
                <a href="#"><span>兔抠元素</span></a>
              </li>
            </ul>
          </div>
        </el-card>
      </div>
      <div class="hotSearch">
        <p>
          <a href="#">文化墙</a>
          <a href="#">吃货节</a>
          <a href="#">端午节</a>
          <a href="#">墙绘</a>
          <a href="#">样机</a>
          <a href="#">拍照框</a>
          <a href="#">婚礼布置</a>
          <a href="#">门头设计</a>
          <a href="#">高考海报</a>
          <a href="#">招聘海报</a>
          <a href="#">导视设计</a>
          <a href="#">美陈设计</a>
          <a href="#">装绘画</a>
        </p>
      </div>
    </div>
    <el-carousel style="heiht:300px">
      <el-carousel-item v-for="item in carouselImagSrcs" :key="item">
        <el-image :src="item"></el-image>
      </el-carousel-item>
    </el-carousel>
    <div class="second">
      <el-carousel indicator-position="none" height="200px">
        <el-carousel-item v-for="item1 in second " :key="item1+'1'" class="secondLeft" style=" height:100%">
          <!-- <el-row :gutter="40" class="secondrow">
            <el-col :span="4" v-for="item in item1" :key="item">
              <img :src="item.url" alt="加载中" style="width:300px">
            </el-col>
          </el-row> -->
          <div v-for="item in item1" :key="item.id" class="secondrow">
            <img :src="item.url" alt="加载中" style="width:300px" class="secondImg">
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <ul v-show="fixed" class="home_left_nav">
      <li @click="clicked(1)" :class="{ onClicked: whoClicked == 1 }">
        <a href="#1">平面</a>
        <span class="home_left_line"></span>
      </li>

      <li @click="clicked(2)" :class="{ onClicked: whoClicked == 2 }">
        <a href="#2">文化墙</a>
        <span class="home_left_line"></span>
      </li>

      <li @click="clicked(3)" :class="{ onClicked: whoClicked == 3 }">
        <a href="#3">商业精选</a>
        <span class="home_left_line"></span>
      </li>

      <li @click="clicked(4)" :class="{ onClicked: whoClicked == 4 }">
        <a href="#">装饰画</a>
        <span class="home_left_line"></span>
      </li>

      <li @click="clicked(5)" :class="{ onClicked: whoClicked == 5 }">
        <a href="#">PPT</a>
        <span class="home_left_line"></span>
      </li>

      <li @click="clicked(6)" :class="{ onClicked: whoClicked == 6 }">
        <a href="#">PNG</a>
        <span class="home_left_line"></span>
      </li>

      <li @click="clicked(7)" :class="{ onClicked: whoClicked == 7 }">
        <a href="#">电商媒体</a>
        <span class="home_left_line"></span>
      </li>

      <li @click="clicked(8)" :class="{ onClicked: whoClicked == 8 }">
        <a href="#">视频</a>
      </li>
    </ul>
    <div class="center">
      <div class="container">
        <div class="clearfix">
          <el-row class="row" id="1">
            <el-col :span="3"><a href="#" class="home_nav_bar_title">平面广告</a></el-col>
            <el-col :span="3"><a href="#" class="nav_bar_text_current">精品推荐</a></el-col>
            <el-col :span="3"><a href="#" class="nav_bar_text">端午节包装</a></el-col>
            <el-col :span="3"><a href="#" class="nav_bar_text">六一儿童节</a></el-col>
            <el-col :span="3"><a href="#" class="nav_bar_text">护士节海报</a></el-col>
            <el-col :span="3"><a href="#" class="nav_bar_text" style="border-right:1px solid #777777;padding-right:25px">夏日饮品</a></el-col>
            <el-col :span="3" style="line-height:35px">
              <el-button type="danger" size="mini" @click="upload">上传作品</el-button>
            </el-col>
          </el-row>

        </div>
        <!-- <div style="">
            <el-button type="danger">上传作品</el-button>
          </div> -->
        <div class="imgContain ">
          <ul>
            <li v-for="item in pintaiList" :key="item.id" class="imgItem" style="height:453px; border-radius:15px;" @mouseover="showshow(item.id)" @mouseout="hideshow(item.id)">
              <div class="pop_top" :ref="item.id+'top'" style=" display: none;">
                <span class="title_name"> {{item.headTitle}}11111</span>
              </div>
              <el-image style="width: 100%; height: 100% ; border-radius:15px;" :src="item.url" @click="pickerImg(item)"></el-image>
              <div class="pop_bottom">
                <a href="#" class="dowload" style=" display: none;" :ref="item.id+'bottom'">立即下载</a>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="container">
        <div class="clearfix">
          <el-row class="row" id="2">
            <el-col :span="4"><a href="#" class="home_nav_bar_title">文化墙·展馆</a></el-col>
            <el-col :span="3"><a href="#" class="nav_bar_text_current">精品推荐</a></el-col>
            <el-col :span="4"><a href="#" class="nav_bar_text">公司前台文化墙</a></el-col>
            <el-col :span="3"><a href="#" class="nav_bar_text">企业文化墙</a></el-col>
            <el-col :span="3"><a href="#" class="nav_bar_text">幼儿园文化墙</a></el-col>
            <el-col :span="3"><a href="#" class="nav_bar_text">高考文化墙</a></el-col>
          </el-row>
        </div>

        <div class="imgContain ">
          <ul>
            <li v-for="item in wenhuaList" :key="item.id" class="imgItem" style="height:453px; border-radius:15px;" @mouseover="showshow(item.id)" @mouseout="hideshow(item.id)">
              <div class="pop_top" :ref="item.id+'top'" style=" display: none;">
                <span class="title_name"> {{item.headTitle}}11111</span>
              </div>
              <!-- <el-image style="width: 100%; height: 100%" :src="item.url" @click="pickerImg(item)"></el-image> -->
              <img :src="item.url" alt="图片加载中" style="width: 100%; height: 100%; border-radius:15px;" @click="pickerImg(item)">
              <div class="pop_bottom">
                <a href="#" class="dowload" style=" display: none;" :ref="item.id+'bottom'">立即下载</a>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="container">
        <div class="clearfix">
          <el-row class="row" id="3">
            <el-col :span="3"><a href="#" class="home_nav_bar_title">商业精选</a></el-col>
            <el-col :span="3"><a href="#" class="nav_bar_text_current">精品推荐</a></el-col>
            <el-col :span="3"><a href="#" class="nav_bar_text">夏季美陈</a></el-col>
            <el-col :span="3"><a href="#" class="nav_bar_text">门头招牌</a></el-col>
            <el-col :span="3"><a href="#" class="nav_bar_text">端午节美陈</a></el-col>
            <el-col :span="3"><a href="#" class="nav_bar_text">房地产导视</a></el-col>
          </el-row>
        </div>
        <div class="imgContain ">
          <ul>
            <li v-for="item in shangyejinxuan" :key="item.id" class="imgItem" style="height:453px; border-radius:15px;" @mouseover="showshow(item.id)" @mouseout="hideshow(item.id)">
              <div class="pop_top" :ref="item.id+'top'" style=" display: none;">
                <span class="title_name"> {{item.headTitle}}11111</span>
              </div>
              <el-image style="width: 100%; height: 100%; border-radius:15px;" :src="item.url" @click="pickerImg(item)"></el-image>
              <div class="pop_bottom">
                <a href="#" class="dowload" style=" display: none;" :ref="item.id+'bottom'">立即下载</a>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import zoumadengJpg1 from "@/static/picture/zoumadeng/1.jpg"
import zoumadengJpg2 from "@/static/picture/zoumadeng/2.jpg"
import zoumadengJpg3 from "@/static/picture/zoumadeng/3.jpg"
import zoumadengJpg4 from "@/static/picture/zoumadeng/4.jpg"
import containJpg1 from "@/static/picture/contain/1.jpg"
import containJpg2 from "@/static/picture/contain/2.jpg"
import containJpg3 from "@/static/picture/contain/3.jpg"
import containJpg4 from "@/static/picture/contain/4.jpg"
import containJpg5 from "@/static/picture/contain/5.jpg"
import containJpg6 from "@/static/picture/contain/6.png"
import containJpg7 from "@/static/picture/contain/7.jpg"
import containJpg8 from "@/static/picture/contain/8.jpg"
import containJpg9 from "@/static/picture/contain/9.jpg"
import containJpg10 from "@/static/picture/contain/10.jpg"
import containJpg11 from "@/static/picture/contain/11.jpg"
import containJpg12 from "@/static/picture/contain/12.jpg"
import containJpg13 from "@/static/picture/contain/13.jpg"
import containJpg14 from "@/static/picture/contain/14.jpg"
import containJpg15 from "@/static/picture/contain/15.jpg"
import containJpg16 from "@/static/picture/contain/16.jpg"
import containJpg17 from "@/static/picture/contain/17.jpg"
import containJpg18 from "@/static/picture/contain/18.jpg"
import containJpg19 from "@/static/picture/contain/19.jpg"
import containJpg20 from "@/static/picture/contain/20.jpg"
import containJpg21 from "@/static/picture/contain/21.jpg"
import containJpg22 from "@/static/picture/contain/22.jpg"
import containJpg23 from "@/static/picture/contain/23.jpg"
import containJpg24 from "@/static/picture/contain/24.jpg"
import csecond1 from "@/static/picture/second/1.jpg"
import csecond2 from "@/static/picture/second/2.jpg"
import csecond3 from "@/static/picture/second/3.jpg"
import csecond4 from "@/static/picture/second/4.jpg"
import csecond5 from "@/static/picture/second/5.jpg"
import csecond6 from "@/static/picture/second/6.jpg"
import csecond7 from "@/static/picture/second/7.jpg"
import csecond8 from "@/static/picture/second/8.jpg"
import Head from "@/component/head"
export default {
  name: "Home",
  props: {},
  data() {
    return {
      fixed: false,
      whoClicked: 1,
      tabSearch:"",
      carouselImagSrcs: [
        zoumadengJpg1,
        zoumadengJpg2,
        zoumadengJpg3,
        zoumadengJpg4,
      ],
      pintaiList: [
        { id: 1, url: containJpg1, headTitle: "简约风517吃货节美食嘉年华宣传海报" },
        { id: 2, url: containJpg2, headTitle: "手绘520表白节企业线上借势插画海报" },
        { id: 3, url: containJpg3, headTitle: "手绘中国风小满字体海报" },
        { id: 4, url: containJpg4, headTitle: "手绘简约致敬护士节海报" },
        { id: 5, url: containJpg5, headTitle: "粉色清新最美护士节节日宣传展板" },
        { id: 6, url: containJpg6, headTitle: "中国旅游日宣传展板" },
        { id: 7, url: containJpg7, headTitle: "蓝色清新立体夏天商业促销宣传宣传展板" },
        { id: 8, url: containJpg8, headTitle: "美食节创意吃货节展板" },
      ],
      wenhuaList: [
        { id: 9, url: containJpg9, headTitle: "时尚创意标语企业励志标语文化墙创意设计图" },
        { id: 10, url: containJpg10, headTitle: "蓝色大气梦想奔跑企业励志标语文化墙创意设计图" },
        { id: 11, url: containJpg11, headTitle: "互联网科技企业发展历程楼道楼梯文化墙" },
        { id: 12, url: containJpg12, headTitle: "蓝色科技企业发展历程楼道楼梯科技感文化墙" },
        { id: 13, url: containJpg13, headTitle: "中式木纹大气酒店食堂文化墙形象墙" },
        { id: 14, url: containJpg14, headTitle: "中式木纹食堂企业酒店餐饮文化墙" },
        { id: 15, url: containJpg15, headTitle: "书香满园创意特色校园幼儿园班级教室环创楼道楼..." },
        { id: 16, url: containJpg16, headTitle: "卡通幼儿园和谐校园学校班级教室楼道楼梯三风..." },
      ],
      shangyejinxuan: [
        { id: 17, url: containJpg17, headTitle: "粉色浪漫520门头美陈设计" },
        { id: 18, url: containJpg18, headTitle: "创新时尚医疗医院护士节美陈DP点" },
        { id: 19, url: containJpg19, headTitle: "夏季海洋风立体拍照框美陈设计" },
        { id: 20, url: containJpg20, headTitle: "复古港风夜景霓虹灯吃货节门头美陈" },
        { id: 21, url: containJpg21, headTitle: "超市水果门头招牌设计广告牌设计效果图" },
        { id: 22, url: containJpg22, headTitle: "水果茶奶茶店门头招牌" },
        { id: 23, url: containJpg23, headTitle: "中式古典园林小区户外地产导视系统 精神堡垒" },
        { id: 24, url: containJpg24, headTitle: "时尚简约地产小区导视设计 精神堡垒" },
      ],
      second: {
        secondOne: [
          { url: csecond1, id: 1, },
          { url: csecond2, id: 2, },
          { url: csecond3, id: 3, },
          { url: csecond4, id: 4, },
        ],
        secondTwo: [
          { url: csecond5, id: 5, },
          { url: csecond6, id: 6, },
          { url: csecond7, id: 7, },
          { url: csecond8, id: 8, },
        ],
      },
      input: "",
      displayCar: false,
    }
  },
  components: {
    Head
  },
  methods: {
    fixedActiveBtn() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      this.fixed = false;
      if (scrollTop >= 420) {
        this.fixed = true;
        this.whoClicked = 1;
      }
      if (scrollTop >= 1430) {

        this.whoClicked = 2;
      }
      if (scrollTop >= 2440) {

        this.whoClicked = 3;
      }

    },
    clicked(val) {
      this.whoClicked = val
      console.log("123", val)
    },
    inputClick() {
      this.displayCar = !this.displayCar
    },
    pickerImg(val) {
      console.log("123", val);
      this.$router.push({
        name: 'About',
        params: {
          id: val.id,
          url: val.url,
          title: val.headTitle,
        }
      })
    },
    search() {
      this.$message("搜索功能开发中")
    },
    showshow(val) {
      // console.log("123",this);
      // this.flag=true;
      console.log("ref", val);
      // console.log("this.ref",this.$refs[val+'top'][0].style.opacity)
      // console.log("this.ref",this.$refs[val+'bottom'][0].style.opacity)
      this.$refs[val + 'bottom'][0].style.display = 'block';
      this.$refs[val + 'top'][0].style.display = 'block';
      // this.$refs[val+"top"]
      // this.$refs[val+"bottom"]
    },
    hideshow(val) {
      this.$refs[val + 'bottom'][0].style.display = 'none';
      this.$refs[val + 'top'][0].style.display = 'none';
    },
    upload() {
      this.$router.push({
        name: "Upload",
        params: {

        }
      })
    },
  },
  mounted: function () {
    window.addEventListener("scroll", this.fixedActiveBtn);
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.row {
  width: 1000px;
  /* padding-top: 10px; */
  height: 38px;
}
.row a {
  line-height: 38px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}
.center {
  margin: 20px auto;
  /* height: 986px; */
  width: 1310px;
}
.center img {
  display: block;
  margin: 0 auto;
  border-radius: 4px;
  width: 100%;
  height: 100%;
}
.container {
  margin: 0px 10px 10px 0px;
  width: 1310px;
  /* height: 48px; */
}

.home_nav_bar_title {
  margin-right: 32px;
  color: grey;
  font-weight: 400;
  font-size: 20px;
  line-height: 20px;
}
.nav_bar_text_current {
  padding: 0 17px;
  font-size: 14px;
  cursor: pointer;
}
a {
  text-decoration: none;
  color: #8c8c8c;
}
a:hover {
  color: #ea766b;
}
.nav_bar_text {
  color: #8c8c8c;
  padding: 0 17px;
  font-size: 14px;
  cursor: pointer;
}
.home_left_nav li {
  position: relative;
  width: 70px;
  height: 45px;
  margin: 10px 0;
  font-size: 13px;
}
.home_left_nav li a {
  display: inline-block;
  color: inherit;
  position: relative;
  top: -2px;
  width: 62px;
  height: 50px;
  line-height: 50px;
}
li {
  list-style: none;
}
.home_left_line {
  content: "";
  width: 50px;
  height: 1px;
  background: #d7d7d7;
  position: absolute;
  top: 50px;
  left: 9px;
}
.onClicked {
  background: #ea766b;
  color: #fff;
  margin-top: 10px;
}
.home_left_nav {
  position: fixed;
  top: 15%;
  left: 7%;
  border: 1px solid #e7e7e7;
  text-align: center;
  border-radius: 14px;
  padding: 12px 0;
  background: #fff;
  z-index: 3;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
  padding-right: 200px;
  /* border-radius: 0 25px 25px 0; */
}
.headerNav {
  width: 1000px;
  margin: 0 0 20px 400px;
  padding: 26px 0 0;
}
.searchBox {
  width: 100%;
  height: 38px;
  /* display: re; */
  position: relative;
}
/* .searchBox input {
  display: flex;
  justify-content: left;
  border-radius: 20px 0 0 20px;
  width: 790px;
  border-right: 0;
} */
/* .btn {
  background-image: linear-gradient(to right, red, yellow);
  width: 110px;
  height: 48px;
  border-radius: 0 20px 20px 0;
  position: absolute;
  left: 0;
} */
.btn {
  /* width: 110px;
    color: red; */
  position: absolute;
  left: 790px;
  height: 40px;
  width: 110px;
  /* border: 1px solid #ccc; */
  border-left: 0;
  border-radius: 0 25px 25px 0;
  background-image: linear-gradient(
    to right,
    rgb(250, 110, 80),
    rgb(240, 100, 136)
  );
  color: #fff;
  border: 0;
}
.hotSearch {
  margin: 15px 0 0 165px;
}
.hotSearch p {
  text-align: left;
}
.hotSearch a {
  display: inline-block;
  /* width: 42px;
      height: 19px; */
  /* padding: 5px ;
      margin: 5px; */
  margin: 0 10px 0 0;
  font-size: 14px;
}
.hotSearch a:nth-child(-n + 2) {
  color: #f86a78;
}
/* .inputStyle{
    border-radius:20% im !important;
} */
.inputCar {
  position: absolute;
  top: 42px;
  left: 160px;
  width: 630px;
  z-index: 8000;
}
.searchHistory {
  width: 95%;
  height: 14px;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding-left: 20px;
  line-height: 14px;
  font-size: 14px;
  color: #ccc;
  display: flex;
  justify-content: left;
}
/* .searchHistory span{
    text-align: left;
} */
.searchHistory a {
  color: #ccc;
  padding-right: 8px;
}
.recommend {
  color: #999999;
  font-size: 16px;
}
.recommend li {
  padding: 8px 0px;
}
.recommend li a span {
  /* display: block;
  float: left; */
  /* padding: 0 ;
margin: 0; */
  display: flex;
  justify-content: left;
}
li:nth-child(-n + 2) a span {
  color: #f86a78;
}
.recommend li:hover {
  background-color: rgb(245, 245, 245);
}
.imgContain {
  width: 1310px;
  /* margin-top: 20px; */
  height: 920px;
}
/* imgContain>li:hover {
  box-shadow: 10px 10px 30px blue inset;
  -webkit-box-shadow: 0 0 30px blue inset;
  -moz-box-shadow: 0 0 30px blue inset;
  -o-box-shadow: 0 0 30px blue inset;
} */
.imgItem {
  width: 23%;
  /* display: flex;
  justify-content: space-between; */
  float: left;
  margin-left: 20px;
  margin-bottom: 20px;
  position: relative;
  /* box-shadow:0px 0px 10px 10px #111 inset; */
  /* z-index: 9999; */
}
.imgContain li:hover {
  box-shadow: 0 0 15px #888;
}
.clearfix {
  clear: both;
  padding-left: 10px;
}
.pop_top {
  /* transition: 0.2s ease-in; */
  position: absolute;
  width: 92%;
  height: 35px;
  padding: 10px 14px 10px 10px;
  top: 0;
  left: 0;
  z-index: 2;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  /* opacity: 0; */
  /* bbackground: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.4) 0,
    transparent 100%
  ); */
  transition: 0.5s ease-in;
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
  /* height: 75px; */
  /* overflow: hidden; */
}
.title_name {
  width: 62%;
  /* transition: 0.2s ease-in; */
  /* opacity: 0; */
  position: relative;
  top: 5px;
  left: 20px;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  /* -o-text-overflow: ellipsis; */
  text-overflow: ellipsis;
  display: block;
  z-index: 9999;
  background: 0 0;
  color: #fff;
  animation-name: exampletop;
  animation-duration: 0.3s;
}
.dowload {
  position: absolute;
  display: inline-block;
  width: 74%;
  height: 42px;
  line-height: 42px;
  vertical-align: middle;
  margin-bottom: 5px;
  text-align: center;
  color: #fff;
  font-size: 22px;
  border-radius: 25px;
  left: 13%;
  /* bottom: 14px; */
  bottom: 0;
  background: linear-gradient(to right, #fcb15b 0, #fb8863 100%);
  transition: 0.5s ease-in;
  animation-name: examplebottom;
  animation-duration: 0.3s;
}
@keyframes exampletop {
  0% {
    left: 20px;
    top: -10px;
  }

  100% {
    left: 20px;
    top: 5px;
  }
}
@keyframes examplebottom {
  0% {
    left: 13%;
    bottom: -10px;
  }

  100% {
    left: 13%;
    bottom: 0;
  }
}
.second {
  height: 100%;
  width: 1450px;
  margin: 20px auto 0px;
}
.secondrow {
  /* display: flex;
 justify-content: space-around; */
  /* float: left; */
  /* margin-left: 50px; */
}
.secondImg {
  float: left;
  padding-right: 20px;
}
.secondLeft {
  /* padding-top: ; */
  margin-left: 95px;
  /* padding-right: 30px; */
  /* display: flex;
 justify-content: space-around; */
}
/* .el-carousel__container1 {
    position: relative;
    height: 200px  !important;
} */
.tabLeft {
  float: left;
  width: 764px;
  border-bottom: 2px solid rgb(231, 231, 231);
}
/* .clear{
    display: block;
} */
.clear:after {
  content: "";
  display: table;
  clear: both;
}
.tab_box{
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: left;
}
.lf {
  float: left;
}
a,
a:hover {
  text-decoration: none;
}
.tabA {
  font-size: 16px;
  display: inline-block;
  height: 58px;
  line-height: 58px;
  color: #595959;
  padding: 0 15px;
  border-bottom: 2px solid transparent;
}
.tabA:hover {
  color: #f43700;
  border-bottom: 2px solid #ed1c23;
}
.head_top_center {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.paperview-input-text >>> .el-input__inner {
  -webkit-appearance: none;
  background-color: #FFF;
  background-image: none;
  border-radius: 4px;
  border: 0px;
  width: 100%;
  padding-top: 15px;
}
</style>
